<template>
  <div class="knowledge-graph-page">
    <div class="page-header">
      <h2>赛力斯知识图谱</h2>
      <p>交互式3D知识结构和关系网络可视化</p>
    </div>

    <div class="page-content">
      <div class="content-main">
        <div class="graph-container">
          <!-- 3D画布 -->
          <canvas ref="canvas" id="knowledge-graph-canvas"></canvas>
          
          <!-- 控制面板 -->
          <div class="controls-panel">
            <h3>可视化控制</h3>
            <div class="control-group">
              <label>
                <input type="checkbox" v-model="simulate" @change="toggleSimulation"> 
                启动物理模拟
              </label>
            </div>
            <div class="control-group">
              <label>布局模式:</label>
              <select v-model="layoutMode" @change="changeLayout">
                <option value="force">力导向</option>
                <option value="circle">圆形</option>
                <option value="sphere">球形</option>
                <option value="spiral">螺旋线</option>
                <option value="grid">网格</option>
              </select>
            </div>
            <div class="control-group">
              <label>
                <input type="checkbox" v-model="autoRotate" @change="toggleAutoRotate"> 
                自动旋转
              </label>
            </div>
            <div class="control-group">
              <label>
                <input type="checkbox" v-model="showLabels" @change="toggleLabels"> 
                显示节点名称
              </label>
            </div>
            <div class="control-group">
              <button @click="resetLayout">重置布局</button>
            </div>
            <div class="control-group">
              <button @click="resetCamera">重置视角</button>
            </div>
          </div>

          <!-- 节点信息面板 -->
          <div class="node-info-panel" v-if="selectedNodeInfo">
            <h3>节点信息</h3>
            <div class="node-details">
              <p><strong>名称:</strong> {{ selectedNodeInfo.name }}</p>
              <p><strong>类型:</strong> {{ selectedNodeInfo.type }}</p>
              <p><strong>分类:</strong> {{ selectedNodeInfo.category }}</p>
              <p><strong>连接数:</strong> {{ selectedNodeInfo.degree }}</p>
            </div>
            <button @click="clearSelection" class="close-btn">关闭</button>
          </div>
        </div>
      </div>

      <div class="content-sidebar">
        <div class="sidebar-section">
          <h3>图谱统计</h3>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-number">{{ stats.nodeCount }}</div>
              <div class="stat-label">总节点数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ stats.edgeCount }}</div>
              <div class="stat-label">总连线数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ stats.totalDataPoints }}</div>
              <div class="stat-label">数据点数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ temperature.toFixed(1) }}</div>
              <div class="stat-label">系统温度</div>
            </div>
          </div>
        </div>

        <div class="sidebar-section">
          <h3>节点类型</h3>
          <div class="node-types">
            <div v-for="(color, type) in nodeTypeColors" :key="type" class="type-item">
              <div class="type-color" :style="{ backgroundColor: color }"></div>
              <span class="type-name">{{ getTypeDisplayName(type) }}</span>
            </div>
          </div>
        </div>

        <div class="sidebar-section">
          <h3>操作说明</h3>
          <div class="instructions">
            <p>• 鼠标拖拽：旋转视角</p>
            <p>• 滚轮：缩放视图</p>
            <p>• 点击节点：查看详情</p>
            <p>• 右键：平移视图</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import NetworkRenderer3D from '@/components/3d-network/NetworkRenderer3D.js'
import { nodeTypeColors } from '@/components/3d-network/data/sailisiSampleData.js'

// 渲染器实例
const canvas = ref(null)
let networkRenderer = null

// 响应式数据
const simulate = ref(true)
const layoutMode = ref('force')
const autoRotate = ref(false)
const showLabels = ref(true)
const selectedNodeInfo = ref(null)
const temperature = ref(100)

// 统计数据
const stats = ref({
  nodeCount: 0,
  edgeCount: 0,
  totalDataPoints: 0
})

// 节点类型显示名称映射 - 扩展版本
const typeDisplayNames = {
  factory: '工厂设备',
  production: '生产系统',
  monitor: '监控系统',
  quality: '质量检测',
  data: '数据处理',
  ai: 'AI智能',
  maintenance: '维护保养',
  energy: '能源管理',
  personnel: '人员管理',
  sensor: '传感器',
  schedule: '生产调度',
  inventory: '库存管理',
  supply: '供应链',
  feedback: '用户反馈',
  trace: '产品追溯',
  safety: '安全保障'
}

// 获取类型显示名称
const getTypeDisplayName = (type) => {
  return typeDisplayNames[type] || type
}

// 控制函数
const toggleSimulation = () => {
  if (networkRenderer) {
    networkRenderer.setSimulation(simulate.value)
  }
}

const changeLayout = () => {
  if (networkRenderer) {
    networkRenderer.setLayoutMode(layoutMode.value)
  }
}

const toggleAutoRotate = () => {
  if (networkRenderer) {
    networkRenderer.setAutoRotate(autoRotate.value)
  }
}

const toggleLabels = () => {
  if (networkRenderer) {
    networkRenderer.toggleLabels(showLabels.value)
  }
}

const resetLayout = () => {
  if (networkRenderer) {
    networkRenderer.resetLayout()
    temperature.value = 100
  }
}

const resetCamera = () => {
  if (networkRenderer) {
    networkRenderer.resetCamera()
  }
}

const clearSelection = () => {
  selectedNodeInfo.value = null
}

// 数据更新回调
const onDataUpdate = (data) => {
  if (data.nodeCount !== undefined) {
    stats.value.nodeCount = data.nodeCount
  }
  if (data.edgeCount !== undefined) {
    stats.value.edgeCount = data.edgeCount
  }
  if (data.totalDataPoints !== undefined) {
    stats.value.totalDataPoints = data.totalDataPoints
  }
  if (data.temperature !== undefined) {
    temperature.value = data.temperature
  }
}

// 节点点击回调
const onNodeClick = (nodeIndex, nodeInfo) => {
  selectedNodeInfo.value = nodeInfo
  console.log('节点点击:', nodeInfo)
}

onMounted(() => {
  if (canvas.value) {
    try {
      networkRenderer = new NetworkRenderer3D(canvas.value)
      networkRenderer.init()
      
      // 设置回调函数
      networkRenderer.onDataUpdate = onDataUpdate
      networkRenderer.onNodeClick = onNodeClick
      
      // 加载赛力斯数据
      networkRenderer.loadSailisiData()
      
      console.log(`[${new Date().toLocaleTimeString()}] 3D知识图谱初始化完成`)
    } catch (error) {
      console.error('初始化3D知识图谱失败:', error)
    }
  }
})

onUnmounted(() => {
  if (networkRenderer) {
    networkRenderer.dispose()
  }
})
</script>

<style scoped>
.knowledge-graph-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.page-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-header p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.page-content {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}

.content-main {
  flex: 1;
  background: #000;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
}

.graph-container {
  height: 100%;
  width: 100%;
  position: relative;
}

#knowledge-graph-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
}

/* 控制面板 */
.controls-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 12px;
  color: white;
  z-index: 1000;
  min-width: 250px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.controls-panel h3 {
  margin: 0 0 16px 0;
  color: #4ecdc4;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid rgba(78, 205, 196, 0.3);
  padding-bottom: 8px;
}

.control-group {
  margin-bottom: 16px;
}

.control-group label {
  display: block;
  margin-bottom: 8px;
  color: #e0e0e0;
  font-size: 14px;
}

.control-group input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.1);
}

.control-group select {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: white;
  font-size: 14px;
}

.control-group select option {
  background: #2a2a2a;
  color: white;
}

.control-group button {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #4ecdc4, #44a08d);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.control-group button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4);
}

/* 节点信息面板 */
.node-info-panel {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 12px;
  color: white;
  z-index: 1000;
  min-width: 280px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.node-info-panel h3 {
  margin: 0 0 16px 0;
  color: #ff9ff3;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 159, 243, 0.3);
  padding-bottom: 8px;
}

.node-details p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #e0e0e0;
}

.node-details strong {
  color: #4ecdc4;
}

.close-btn {
  width: 100%;
  padding: 8px;
  background: rgba(255, 107, 107, 0.8);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 12px;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 107, 107, 1);
}

.content-sidebar {
  width: 320px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 24px;
  overflow-y: auto;
}

.sidebar-section {
  margin-bottom: 32px;
}

.sidebar-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #2d3748;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
  font-weight: 700;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #f7fafc, #edf2f7);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #4299e1;
  margin-bottom: 4px;
  text-shadow: 0 2px 4px rgba(66, 153, 225, 0.1);
}

.stat-label {
  font-size: 13px;
  color: #718096;
  font-weight: 500;
}

/* 节点类型 */
.node-types {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.type-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.type-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
}

.type-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.type-name {
  font-size: 14px;
  color: #495057;
  font-weight: 500;
}

/* 操作说明 */
.instructions {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #4ecdc4;
}

.instructions p {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #6c757d;
  line-height: 1.5;
}

.instructions p:last-child {
  margin-bottom: 0;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .content-sidebar {
    width: 280px;
  }
}

@media (max-width: 1200px) {
  .page-content {
    flex-direction: column;
  }
  
  .content-sidebar {
    width: 100%;
    order: -1;
    max-height: 300px;
  }
  
  .controls-panel {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: 16px;
  }
  
  .node-info-panel {
    position: relative;
    bottom: auto;
    left: auto;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: 8px;
    gap: 8px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .controls-panel {
    min-width: auto;
    width: 100%;
  }
  
  .node-info-panel {
    min-width: auto;
    width: 100%;
  }
}
</style>
